<template>
  <div id="hideLabel">
    <span>隐性标签：</span>
    <el-button
      class="tag-name"
      round
      v-for="(item, index) in showList"
      :key="item.labelId"
      >{{ item.labelName }}-{{ item.user ? item.user.userName : ''
      }}<i
        v-if="isAdmin || item.user.userId === dapengUserId"
        @click="remove(item, index)"
        class="el-icon-circle-close el-icon--right"
      ></i
    ></el-button>
    <el-button type="text" v-if="copyLabels.length > 3" @click="showAll"
      >查看全部</el-button
    >
    <el-dropdown
      trigger="click"
      :hide-on-click="false"
      placement="bottom-start"
      @visible-change="setLabel"
    >
      <el-button type="primary">
        显示隐性标签<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown" class="hideLabelList">
        <el-input
          clearable
          v-model.trim="searchValue"
          placeholder="请输入标签名搜索"
          prefix-icon="el-icon-search"
          size="small"
        ></el-input>
        <template v-if="allList.length === 0">
          <el-dropdown-item>您没有添加隐性标签</el-dropdown-item>
        </template>
        <template v-else>
          <el-dropdown-item
            v-for="(item, index) in allList"
            :key="item.labelId"
            :command="item.labelId"
            :disabled="item.disabled"
            @click.native="handleCommand(index, item)"
          >
            <span class="name" :title="item.labelName">
              {{ item.labelName }}</span
            >
            <i
              :class="item.checked || item.disabled ? 'el-icon-check' : ''"
            ></i>
          </el-dropdown-item>
          <el-button
            v-if="showMore"
            class="more"
            type="text"
            style="width: 100%;
      text-align: center;"
            @click="getMoreList"
            >加载更多</el-button
          >
          <el-button
            v-else
            class="more"
            type="text"
            style="width: 100%;
      text-align: center;"
            >没有更多了~</el-button
          >
        </template>
      </el-dropdown-menu>
    </el-dropdown>
    查看全部标签弹窗
    <dialogAllLabel
      v-if="dialogData.isShow"
      :dialogData="dialogData"
      :dapengUserId="dapengUserId"
      :isAdmin="isAdmin"
      @afterRemove="afterRemove"
    ></dialogAllLabel>
  </div>
</template>

<script>
import { add, del, getList } from '@/api/contentTags/content' // 接口
import dialogAllLabel from '@common/hideLabel/dialogAllLabel'
export default {
  name: 'hideLabel',
  msg: '作业/作品/生活/帖子/阅读/长视频-隐性标签',
  props: ['hideLabelObj', 'labels', 'labelList', 'labelListTotal'], //labels-已打标签，labelList-标签下拉列表,labelListTotal-标签下拉列表总数
  components: {
    dialogAllLabel
  },
  computed: {
    dapengUserId() {
      return this.$store.state.user.dapengUserId
    },
    dapengUserName() {
      return this.$store.state.user.userName
    },
    isAdmin() {
      return JSON.parse(localStorage.getItem('userInfo')).isAdmin
    }
  },
  watch: {
    searchValue(newV, oldV) {
      this.pageNum = 0
      this.allList = []
      this.getMoreList(newV)
    }
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 30,
      dialogData: {
        isShow: false,
        labels: [],
        id: ''
      },
      contentId: '',
      showList: [], //展示的3个标签
      allList: [], //展示的全部个标签
      copyLabels: [], //复制已打标签
      showMore: false, //显示更多
      searchValue: '' //搜索内容
    }
  },
  mounted() {
    let allList = this.labelList ? this.labelList : []
    this.allList = JSON.parse(JSON.stringify(allList))
    let labels = this.labels ? this.labels : []
    this.copyLabels = JSON.parse(JSON.stringify(labels))
    if (this.allList.length > 0) {
      this.setDisabledLabel()
    }
    this.contentId = this.hideLabelObj.contentId
    this.getShowList()
    this.setShowMore(this.labelListTotal)
  },
  methods: {
    /*加载更多隐性标签*/
    getMoreList(name) {
      this.pageNum++
      let obj = {
        labelName: name,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      getList(
        obj,
        (response) => {
          let labelList = response.rows
          labelList.forEach((item) => {
            item.disabled = false
            item.checked = false
          })
          this.allList = this.allList.concat(labelList)
          this.setShowMore(response.total)
          this.setDisabledLabel()
        },
        (response) => {
          Message.warning(response.message)
        }
      )
    },
    /*获取打标签前三个*/
    getShowList() {
      let allCheckLabels = JSON.parse(JSON.stringify(this.copyLabels))
      this.showList = allCheckLabels.splice(0, 3)
    },
    //设置下拉框列表不可选状态
    setDisabledLabel() {
      let labels = this.copyLabels
      this.allList.forEach((item, index) => {
        this.$set(this.allList[index], 'disabled', false)
        this.$set(this.allList[index], 'checked', false)
      })
      labels.forEach((item) => {
        let labelId = item.labelId
        this.allList.forEach((item, index) => {
          if (labelId === item.labelId) {
            this.$set(this.allList[index], 'disabled', true)
            this.$set(this.allList[index], 'checked', true)
          }
        })
      })
    },
    handleCommand(index, item) {
      let flag = !this.allList[index].checked
      if (flag) {
        //每次点击，请求接口，添加标签
        let labelIds = [] //选中数据id
        let labelObjAry = [] //选中数据
        labelIds.push(item.labelId)
        let { labelId, labelName, labelProperty } = item
        let obj = {
          labelId,
          labelName,
          labelProperty,
          user: {
            userId: this.dapengUserId,
            userName: this.dapengUserName
          }
        }
        labelObjAry.push(obj)
        let addObj = {
          ...this.hideLabelObj,
          labelIds
        }
        add(
          this.contentId,
          addObj,
          (response) => {
            this.$message.success('操作成功')
            this.$set(this.allList[index], 'checked', flag)
            this.copyLabels = this.copyLabels.concat(labelObjAry) //避免页面刷新，将本次选中数据与原选中数据合并
            this.afterRemove()
          },
          (response) => {
            this.$message.warning(response.message)
          }
        )
      }
    },
    /*显示隐性标签下拉框*/
    setLabel(type) {
      if (type) {
        //下拉框展开
        /* console.log('出现')*/
      } else {
        //下拉框收起
        this.searchValue = ''
      }
    },
    /*删除隐性标签*/
    remove(item, index) {
      let {
        labelId,
        user: { userId: labelOperatorId }
      } = item
      let obj = {
        labelOperatorId,
        labelReason: ''
      }
      del(
        this.contentId,
        labelId,
        obj,
        (response) => {
          this.$message.success('操作成功')
          this.copyLabels.splice(index, 1) //避免页面刷新
          this.afterRemove()
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    },
    /* 删除标签后的操作*/
    afterRemove() {
      this.getShowList()
      this.setDisabledLabel()
    },
    /*显示查看全部弹窗*/
    showAll() {
      this.dialogData.id = this.contentId
      this.dialogData.labels = this.copyLabels
      this.dialogData.isShow = true
    },
    /*设置显示更多按钮*/
    setShowMore(total = 0) {
      this.showMore = this.pageNum * this.pageSize < total
    }
  }
}
</script>

<style lang="less">
#hideLabel {
  margin-top: -8px;
  span {
    font-size: 14px;
  }
  .el-button {
    margin-top: 8px;
  }
  .el-dropdown {
    margin-left: 10px;
  }
  button.el-button.tag-name {
    white-space: normal;
  }
}
.hideLabelList {
  width: 180px;
  max-height: 150px;
  overflow: auto;
  span.name {
    display: inline-block;
    width: 120px;
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-dropdown-menu__item {
    padding: 0 10px;
  }
  .el-popper[x-placement^='top'] .popper__arrow {
    display: none;
  }
  .popper__arrow {
    display: none;
  }
  .el-input--suffix {
    .el-input__inner {
      padding-right: 10px;
    }
  }
}
</style>
